@media screen and (max-width: 1120px) {
    /* For tablets: */
    .title{
        margin: 0 auto;
        width: 90%;
    }
    .title h1, .title p, hr{
        width: 100%;
        margin: 0 auto;
    }
    .title h1{
        font-size: 60px;
        height: auto;
        line-height: 100px;  
    }
    #game{
        margin: 0 auto;
        padding: 30px 0 0 0;
       
    }
    .card, .back, .front{
        height: 130px;
        width: 130px;
        border: 0px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 12px 0px #4b0175;
    transition: all .4s linear;
    }
    
}

@media screen and (max-width: 567px) {
    body{
        background-size: auto;
        background-position: 70% 40%;
    }
    
    .title h1{
        font-size: 30px;
        height: auto;
        line-height: 40px;
    }
    .title p{
        height: auto;
        font-size: 15px;
        line-height: 20px;
        padding: 2px;
    }
    #game{
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
    }
    .card, .back, .front{
        height: 94px;
        width: 110px !important;
        border-radius: 3px;
        margin: 2px;
    }
    .popup {
        padding: 2px;
        background: black url(../images/avengers/thanos-bg.jpg) no-repeat top center;
        background-size: cover;
        width: 80%;
        height: 80%;
    }
    .popup .content-1{
        font-size: 2em;
    }
    .popup .content-2, .popup .content-3{
        flex: 0 1 40%;
        padding: 0;
        margin: 0 10px;
        height: 40%; 
    }
    .popup .content-3 button, .popup .content-2{
        font-size: 1em;
    }
}

@media screen and (max-width: 508px) {
    body{
        background-size: auto;
        background-position: 70% 40%;
    }
    
    .title h1{
        font-size: 30px;
        height: auto;
        line-height: 40px;
    }
    .title p{
        height: auto;
        font-size: 15px;
        line-height: 20px;
        padding: 2px;
    }
    #game{
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
    }
    .card, .back, .front{
        height: 94px;
        width: 100px !important;
        border-radius: 3px;
        margin: 2px;
    }
    .popup {
        padding: 2px;
        background: black url(../images/avengers/thanos-bg.jpg) no-repeat top center;
        background-size: cover;
        width: 80%;
        height: 80%;
    }
    .popup .content-1{
        font-size: 2em;
    }
    .popup .content-2, .popup .content-3{
        flex: 0 1 40%;
        padding: 0;
        margin: 0 10px;
        height: 40%; 
    }
    .popup .content-3 button, .popup .content-2{
        font-size: 1em;
    }
}

@media screen and (max-width: 446px) {
    /* For mobile phones: */
    body{
        background-size: auto;
        background-position: 70% 40%;
    }
    
    .title h1{
        font-size: 30px;
        height: auto;
        line-height: 40px;
    }
    .title p{
        height: auto;
        font-size: 15px;
        line-height: 20px;
        padding: 2px;
    }
    #game{
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
    }
    .card, .back, .front{
        height: 94px;
        width: 90px !important;
        border-radius: 3px;
        margin: 2px;
    }
    .popup {
        padding: 2px;
        background: black url(../images/avengers/thanos-bg.jpg) no-repeat top center;
        background-size: cover;
        width: 80%;
        height: 80%;
    }
    .popup .content-1{
        font-size: 2em;
    }
    .popup .content-2, .popup .content-3{
        flex: 0 1 40%;
        padding: 0;
        margin: 0 10px;
        height: 40%; 
    }
    .popup .content-3 button, .popup .content-2{
        font-size: 1em;
    }
}

@media screen and (max-width: 415px) {
    /* For mobile phones: */
    body{
        background-size: auto;
        background-position: 70% 40%;
    }
    
    .title h1{
        font-size: 30px;
        height: auto;
        line-height: 40px;
    }
    .title p{
        height: auto;
        font-size: 15px;
        line-height: 20px;
        padding: 2px;
    }
    #game{
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
    }
    .card, .back, .front{
        height: 94px;
        width: 80px !important;
        border-radius: 3px;
        margin: 2px;
    }
    .popup {
        padding: 2px;
        background: black url(../images/avengers/thanos-bg.jpg) no-repeat top center;
        background-size: cover;
        width: 80%;
        height: 80%;
    }
    .popup .content-1{
        font-size: 2em;
    }
    .popup .content-2, .popup .content-3{
        flex: 0 1 40%;
        padding: 0;
        margin: 0 10px;
        height: 40%; 
    }
    .popup .content-3 button, .popup .content-2{
        font-size: 1em;
    }
}

@media screen and (max-width: 350px) {
    /* For mobile phones: */
    body{
        background-size: auto;
        background-position: 70% 40%;
    }
    
    .title h1{
        font-size: 30px;
        height: auto;
        line-height: 40px;
    }
    .title p{
        height: auto;
        font-size: 15px;
        line-height: 20px;
        padding: 2px;
    }
    #game{
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
    }
    .card, .back, .front{
        height: 94px;
        width: 75px !important;
        border-radius: 3px;
        margin: 2px;
    }
    .popup {
        padding: 2px;
        background: black url(../images/avengers/thanos-bg.jpg) no-repeat top center;
        background-size: cover;
        width: 80%;
        height: 80%;
    }
    .popup .content-1{
        font-size: 2em;
    }
    .popup .content-2, .popup .content-3{
        flex: 0 1 40%;
        padding: 0;
        margin: 0 10px;
        height: 40%; 
    }
    .popup .content-3 button, .popup .content-2{
        font-size: 1em;
    }
}